<template>
  <div class="inputBox">
    <input 
    :class="{success:flag,error:!flag}"
    :type="type" 
    :placeholder="textPlaceholder"
    v-model="inputValue"
    @blur="showTips"
    >
    <!-- <span class="errorMsg">{{msg}}</span> -->
  </div>
</template>

<script>
export default {
  props: ["textPlaceholder","type","rule","errMsg"],
  data () {
    return {
      inputValue:'',
      flag:true,
      // msg:''
    }
  },
  watch: {
    inputValue(newValue){
      // console.log(newValue);
      const regExp = new RegExp(this.rule);

      this.flag = regExp.test(newValue);

      if(!this.flag){
        // console.log(this.errMsg);
        this.msg = this.errMsg;
      }else{
        this.msg = ''
      }
      this.$emit('valChange',newValue)
    }
  },
  methods: {
    showTips(){
      if(!this.inputValue===" "){
        return;
      } 

      if(!this.flag){
        this.$toast.fail(this.errMsg)
      }
    }
  }
};
</script>

<style lang="less" scoped>
input {
  border: 0;
  outline: none;
  border-bottom: 0.278vw solid #000;
  width: 100%;
  font-size: 5vw;
  height: 13.889vw;
}

// .errorMsg{
//   font-size: 12px;
//   color: red;
// }

.success{
  border-bottom-color: #ccc;
}

.error{
  border-bottom-color: red;
}
</style>